<template>
  <TodoHeader @add-todo="handleAddTodo" />
  <TodoList>
    <!-- todo: {id:1, content: '吃饭', done: false} -->
    <draggable v-model="todos" animation="300" item-key="id">
      <template #item="{ element }">
        <TodoItem
          v-bind="element"
          @toggle="handleToggleTodo"
          @edit="handleEditTodo"
          @del="handleDeleteTodo"
        ></TodoItem>
      </template>
    </draggable>
  </TodoList>
  <TodoFooter
    :todos="todos"
    @toggle-all="handleToggleAll"
    @clear-done="handleClearDone"
    @clear-all="handleClearAll"
  />
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'

import TodoHeader from './components/TodoHeader.vue'
import TodoList from './components/TodoList.vue'
import TodoItem from './components/TodoItem.vue'
import TodoFooter from './components/TodoFooter.vue'

import draggable from 'vuedraggable'

const todos = ref([])

const handleAddTodo = (todo) => {
  todos.value.push(todo)
}
const handleToggleTodo = (id, value) => {
  // 1. 根据id查找对应的todo
  const todo = todos.value.find((item) => item.id === id)
  todo.done = value
}
const handleEditTodo = (id, value) => {
  // 1. 根据id查找对应的todo
  const todo = todos.value.find((item) => item.id === id)
  todo.content = value
}

const handleToggleAll = (value) => {
  // 找到所有todo，设置done=value
  todos.value.forEach((item) => {
    item.done = value
  })
}
const handleClearDone = () => {
  // 找到所有done=false(未完成)的todo，过滤出来
  todos.value = todos.value.filter((item) => !item.done)
}

const handleClearAll = () => {
  todos.value = []
}

const handleDeleteTodo = (id) => {
  // 1. 根据id查找对应的todo
  const index = todos.value.findIndex((item) => item.id === id)
  // 2. 删除该todo
  todos.value.splice(index, 1)
}

watch(
  todos,
  () => {
    // 监听todos变化，将数据存储到localStorage中
    localStorage.setItem('todos', JSON.stringify(todos.value))
  },
  { deep: true }
)

onMounted(() => {
  // 从localStorage中获取数据
  const localTodos = JSON.parse(localStorage.getItem('todos') || '[]')
  todos.value = localTodos
})
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>
